let width = window.innerWidth
let height = window.innerHeight

let c = document.getElementById("canvas");
c.width = 400
c.height = 400
let ctx = c.getContext("2d");
// ctx.fillStyle = "#FF0000";
// ctx.fillRect(0, 0, 150, 75);
let image = new Image()
image.src = '/zoom/img.png'
image.onload = function() {
	console.log('image', image.height, image.width)
	ctx.drawImage(image, 0, 0, width, width)
}
let div = document.getElementById('div')
// let pic = new Zoom('#div', _log, ctx);
let scale = 1
ctx.lineWidth = 5
let lx = 0
let ly = 0
div.addEventListener('touchstart', function(e) {
	// console.log('touchstart', e)
	let t = e.targetTouches[0]

	// clientX: t.clientX,
	// clientY: t.clientY,


})
div.addEventListener('touchmove', function(e) {
	console.log('touchmove', e)
	let t = e.targetTouches[0]
	// _log2.innerHTML = JSON.stringify({
	// 	clientX: t.clientX,
	// 	clientY: t.clientY,
	// })
})
div.addEventListener('touchend', function(e) {
	console.log('touchend', e)
	// let t = e.targetTouches[0]
	// _log2.innerHTML = JSON.stringify({
	//     clientX: t.clientX,
	//     clientY: t.clientY,
	// })
})
pic.centerPonitor = {
	x: c.width / 2,
	y: c.height / 2,
	org: {
		x: c.width / 2,
		y: c.height / 2,
	},
}
pic.oPonitor = {
	x: 0,
	y: 0,
	xCd: c.width / 2,
	yCd: c.height / 2,
	org: {
		x: 0,
		y: 0,
		xCd: c.width / 2,
		yCd: c.height / 2,
	}
}
pic.onPan = function(ev) {
	// console.log('ev', ev)
	// document.getElementById('sc').innerHTML = ev.scale
	if (ev.scale != 1)
		return
	let translateX = this.translateX || 0
	let translateY = this.translateY || 0

	let x = ev.center.x
	let y = ev.center.y
	ctx.fillStyle = "#FF0000";
	let scale = this.scale

	// pic.oPonitor.x += translateX + (1 - scale) * pic.oPonitor.xCd
	// pic.oPonitor.y += translateY + (1 - scale) * pic.oPonitor.yCd

	pic.centerPonitor.x += translateX
	pic.centerPonitor.x += translateY
	let changeX = (1 - scale) * Math.abs(x - pic.centerPonitor.x)
	let changeY = (1 - scale) * Math.abs(y - pic.centerPonitor.y)
	let lX = x
	let lY = y
	console.log('lX, lY', lX, lY)
	_log1.innerHTML = JSON.stringify({
		scale,
		changeX,
		changeY,
		x,
		y,
		centerPonitor: pic.centerPonitor,
		oPonitor: pic.oPonitor,
	})
	if (ev.type == 'panstart') {
		ctx.beginPath();
		// ctx.moveTo(x - translateX, y - translateY);
		ctx.moveTo(lX, lY);
	};
	// if (ev.type == 'panmove') {
	// ctx.lineTo(x - translateX, y - translateY);
	ctx.lineTo(lX, lY);
	ctx.stroke();
	// };
}
pic.init();